<template>
    <div>
        <el-form :inline="true">
            <el-form-item label-width="30px">
                <AutoCompleteVue :onSearchResult="onSearchResult" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onClickAddMasker">新增标点</el-button>
            </el-form-item>
        </el-form>

        <div class="amap-wrapper">
            <div id="container"></div>
            <div class="toolbar">
                <span v-if="loaded"> 当前所在位置: {{ locationInfo }} </span>
                <span v-else>正在定位</span>
            </div>
        </div>

        <EditLocationPanel
            ref="editLocationPanel"
            :openCircleEditor="openCircleEditor"
            :closeCircleEditor="closeCircleEditor"
        />
    </div>
</template>

<script>
import { AMapInit, newCircle } from '../../../utils/AMapUtils';
import AutoCompleteVue from '../../../components/amap/AutoComplete.vue';
import EditLocationPanel from '../../../components/amap/EditLocationPanel.vue';
export default {
    data() {
        return {
            map: null,
            locationValue: '',
            locationInfo: '',
            autoComplete: null,
            center: [121.618622, 38.91459],
            loaded: false,
            markerList: [],
            CircleList: [],

            circleEditor: null,

            isClickAddMasker: false,
        };
    },
    components: {
        AutoCompleteVue,
        EditLocationPanel,
    },
    mounted() {
        this.initAMap();
    },
    methods: {
        initAMap() {
            const __success = AMap => {
                this.map = new AMap.Map('container', {
                    viewMode: '2D',
                    zoom: 15,
                    center: this.center,
                });
                this.loaded = true;
                this.addMapEvent();
                this.getAllLocationList();
            };

            AMapInit(__success);
        },
        onSearchResult(results) {
            if (results.length == 0) return;
            this.addMarkers(results);
            this.map.setFitView();
        },

        setFitView() {
            this.center = this.map.setFitView();
        },

        setCenter(center) {
            if (!this.loaded) return;
            this.map.setCenter(center);
            this.center = center;
        },

        clearMaskers() {
            if (this.markerList.length < 1) return;
            for (let i = 0; i < this.markerList.length; i++) {
                this.markerList[i].remove();
            }
            this.markerList = [];
        },

        addMarkers(coordinateList) {
            this.clearMaskers();
            for (let i = 0; i < coordinateList.length; i++) {
                const marker = new AMap.Marker({
                    position: new AMap.LngLat(coordinateList[i].lng, coordinateList[i].lat),
                });
                this.markerList.push(marker);
                this.map.add(marker);
            }
        },

        addCircles(circleData, isOpenEditor = true) {
            const circle = newCircle(circleData);
            if (!circle || !this.map) return;
            circle.on('click', e => {
                this.openEditPanel(e);
            });
            this.CircleList.push(circle);
            this.map.add(circle);

            this.setCircleEditor(circle);
            if (isOpenEditor) this.openCircleEditor();
        },

        setCircleEditor(circle) {
            if (!circle) return;
            if (this.circleEditor) {
                this.closeCircleEditor();
            }
            this.circleEditor = new AMap.CircleEditor(this.map, circle);
        },

        openCircleEditor() {
            if (!this.circleEditor) return;
            this.circleEditor.open();
        },

        closeCircleEditor() {
            if (!this.circleEditor) return;
            this.circleEditor.close();
            this.circleEditor = null;
        },

        // 绑定地图事件
        addMapEvent() {
            if (!this.loaded) return;
            this.map.on('click', e => {
                if (this.isClickAddMasker) {
                    const coordinate = {
                        lng: e.lnglat.getLng(),
                        lat: e.lnglat.getLat(),
                    };
                    this.addCircles({ coordinate });
                    this.isClickAddMasker = false;
                } else {
                    this.closeCircleEditor();
                }

                this.setLocationInfo(e.lnglat.getLng() + ', ' + e.lnglat.getLat());
            });
        },

        setLocationInfo(locationInfo) {
            this.locationInfo = locationInfo;
        },

        onClickAddMasker() {
            this.isClickAddMasker = true;
        },

        openEditPanel(e) {
            const circle = e.target;
            this.setCircleEditor(circle);
            this.$refs.editLocationPanel.open(circle);
        },

        // 获取所有已标记的位置信息
        getAllLocationList() {
            const __success = data => {
                for (let i = 0; i < data.length; i++) {
                    const coordinateList = JSON.parse(data[i].centerTude);
                    this.addCircles(
                        {
                            ...data[i],
                            coordinate: {
                                lng: coordinateList[0],
                                lat: coordinateList[1],
                            },
                            radius: Number(data[i].radius),
                            fillColor: '#12b886',
                            extData: {
                                ...data[i],
                            },
                        },
                        false,
                    );
                }
            };
            const __fail = () => {};
            this.$http({
                url: this.$http.adornUrl('mark/selectAllRegion'),
                method: 'get',
            })
                .then(res => {
                    if (res.status === 200) {
                        __success(res.data);
                    } else {
                        __fail();
                    }
                })
                .catch(err => {
                    __fail(err);
                });
        },
    },
};
</script>
<style>
#container {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 700px;
}

#tip-input {
    padding: 6px 10px;
}
</style>
